<meta charset="UTF-8">
<div class="pd-10 system" id="car-type-wraper">
    <div style="padding: 5px 0">
        <i-button icon="md-add"  @click="openAddCarTypeModal">添加车辆类型</i-button> 
    </div>
    <div>
        <i-table border :data="tableData" :columns="columns" :loading="loading"></i-table>
    </div>

    <!-- 添加车辆类型 -->
    <Modal v-model="addCarTypeModal" width="520" class-name="vertical-center-modal">
        <p slot="header" style="color:#2D8CF0;text-align:center">
            <Icon type="md-add"></Icon>
            <span v-show="!isEdit">添加车辆类型</span>
            <span v-show="isEdit">编辑车辆类型</span>
        </p>
        <div>
            <Row>
                <i-col :span="3" :offset="1" style="height: 100%;text-align:right;line-height:32px;">
                    类型名称&nbsp;:&nbsp;
                </i-col>
                <i-col :span="7">
                    <i-input v-model.trim="typeInfo.name"></i-input>
                </i-col>
                <i-col :span="3" :offset="2" style="height: 100%;text-align:right;line-height:32px;">
                    内容&nbsp;:&nbsp;
                </i-col>
                <i-col :span="7">
                    <i-input v-model.trim="typeInfo.content"></i-input>
                </i-col>
            </Row>
        </div>
        <div slot="footer">
            <i-button type="primary"  @click="handleAddCarType" style="width: 100%">{{isEdit?'编辑':'添加'}}</i-button>
        </div>
    </Modal>
    <script>
      vueInstanse =  new Vue({
            el:"#car-type-wraper",
            data:function(){
                var me = this;
                return {
                    addCarTypeModal:false,
                    rowIndex:null,
                    isEdit:false,
                    loading:true,
                    columns:[
                        {
                            title: '名称',
                            key: 'name' 
                        },
                        {
                            title: '内容',
                            key: 'content'
                        },
                        {
                            title: '操作',
                            key: 'action',
                            width: 150,
                            render: function(h, params) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: function() {
                                                me.openEditCarTypeModal(params);
                                            }
                                        }
                                    }, '修改'),
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '确定要删除吗?'
                                        },
                                        on: {
                                            'on-ok': function () {
                                                me.handleDel(params);
                                            }
                                        }
                                    },[
                                    h('Button', {
                                            props: {
                                            type: 'error',
                                            size: 'small'
                                            }
                                        },"删除") 
                                    ]) 
                                ]);
                            }
                        }
                    ],
                    tableData:[],
                    typeInfo:{
                        name:"",
                        content:"",
                        nameen:"",
                        nametw:""
                    }
                }
            },
            methods: {
                openAddCarTypeModal:function(){
                    this.isEdit = false;
                    this.addCarTypeModal = true;
                },
                handleAddCarType:function(){
                    var url = null;
                    var me = this;
                    if(this.typeInfo.name == "" && this.typeInfo.content == "" ){
                        this.$Message.error("请填写类型和内容");
                        return ;
                    }
                    var data = {
                        name:this.typeInfo.name,
                        content:this.typeInfo.content
                    };

                    if(this.isEdit){
                        url = myUrls.editVehicleType();
                        data = this.typeInfo;
                    }else{
                        url = myUrls.addVehicleType(); 
                    }
                    utils.sendAjax(url,data,function (resp) {
                        console.log(resp);
                        if(resp.status == 0){
                            if(me.isEdit){
                                me.$Message.success("编辑成功");

                                for(var key in me.typeInfo){
                                    if(me.typeInfo.hasOwnProperty(key)){
                                        var val = me.typeInfo[key];
                                        me.tableData[me.rowIndex][key] = val;
                                    };
                                };

                            }else{
                                me.$Message.success("添加成功");
                                me.queryCarTypeList(); 
                            }
                            me.addCarTypeModal = false;
                        }else{
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                openEditCarTypeModal:function(params){
                    this.isEdit = true;
                    this.addCarTypeModal = true;
                    this.typeInfo = JSON.parse(JSON.stringify(params.row));
                    this.rowIndex = params.index;
                },
                handleDel:function(params){
                    var me = this;
                    var url = myUrls.deleteVehicleType();
                    var data = {vhctypeid:params.row.vhctypeid};
                    utils.sendAjax(url,data,function (resp) { 
                        if(resp.status == 0){
                            me.$Message.success("删除成功");
                            me.$delete(me.tableData,params.index);
                        }else{
                            me.$Message.success(resp.cause);
                        };
                    });
                },
                queryCarTypeList:function(){
                    var me = this;
                    var url = myUrls.pageQueryVehicleType();
                    utils.sendAjax(url,{},function (resp) { 
                        me.loading = false;
                        if(resp.status == 0){
                            me.tableData = resp.records;
                        };
                    });
                }
            },
            watch:{
                addCarTypeModal:function(){
                    if(!this.isEdit){
                        this.typeInfo = {name:"",content:"",nameen:"",nametw:""};
                    }
                }
            },
            mounted:function() {
                this.queryCarTypeList();
            },
        })
    </script>
</div>